<template>
<div class="detail-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar left-arrow @click-left="$router.back()" :border="false" class="detail-nav">
        <template #right>
            <van-icon name="share-o" size="20" @click="onShare" />
            <van-icon name="ellipsis" size="20" class="more-icon" @click="showActionSheet = true" />
        </template>
    </van-nav-bar>

    <!-- 主要内容区域 -->
    <div class="detail-content">
        <!-- 图片轮播 -->
        <div class="detail-swiper">
            <van-swipe :autoplay="3000" indicator-color="white" @change="onSwipeChange">
                <van-swipe-item v-for="(image, index) in note.images" :key="index">
                    <img :src="image" class="swipe-image" />
                </van-swipe-item>
            </van-swipe>
            <div class="swipe-indicator">{{ currentSwipe + 1 }}/{{ note.images.length }}</div>
        </div>

        <!-- 笔记内容 -->
        <div class="detail-info">
            <h1 class="detail-title">{{ note.title }}</h1>
            <p class="detail-desc">{{ note.content }}</p>

            <!-- 话题和位置 -->
            <div class="detail-tags">
                <div v-if="note.topics && note.topics.length > 0" class="detail-topics">
                    <span v-for="(topic, index) in note.topics" :key="index" class="detail-topic"
                        @click="goToTopic(topic)">
                        #{{ topic }}
                    </span>
                </div>
                <div v-if="note.location" class="detail-location" @click="goToLocation(note.location)">
                    <van-icon name="location-o" />
                    <span>{{ note.location }}</span>
                </div>
            </div>

            <!-- 发布时间 -->
            <div class="detail-time">{{ note.createTime }}</div>
        </div>

        <!-- 用户信息 -->
        <div class="user-info">
            <div class="user-avatar" @click="goToUser(note.userId)">
                <img :src="note.userAvatar" alt="avatar" />
            </div>
            <div class="user-detail" @click="goToUser(note.userId)">
                <div class="user-name">{{ note.userName }}</div>
                <div class="user-desc">{{ note.userDesc }}</div>
            </div>
            <div class="follow-btn" :class="{ 'followed': isFollowed }" @click="toggleFollow">
                {{ isFollowed ? '已关注' : '关注' }}
            </div>
        </div>

        <!-- 评论区 -->
        <div class="comment-section">
            <div class="section-header">
                <h3>评论 ({{ comments.length }})</h3>
                <span class="sort-btn" @click="toggleCommentSort">
                    {{ commentSortType === 'hot' ? '按热度' : '按时间' }}
                    <van-icon name="arrow-down" />
                </span>
            </div>

            <!-- 评论列表 -->
            <div class="comment-list" v-if="comments.length > 0">
                <div v-for="(comment, index) in comments" :key="index" class="comment-item">
                    <div class="comment-user">
                        <img :src="comment.userAvatar" alt="avatar" class="comment-avatar"
                            @click="goToUser(comment.userId)" />
                        <div class="comment-user-info">
                            <div class="comment-user-name" @click="goToUser(comment.userId)">{{ comment.userName }}
                            </div>
                            <div class="comment-time">{{ comment.createTime }}</div>
                        </div>
                        <div class="comment-like" @click="likeComment(index)">
                            <van-icon :name="comment.isLiked ? 'like' : 'like-o'" />
                            <span>{{ comment.likeCount }}</span>
                        </div>
                    </div>
                    <div class="comment-content">{{ comment.content }}</div>

                    <!-- 回复列表 -->
                    <div class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                        <div v-for="(reply, replyIndex) in comment.replies" :key="replyIndex" class="reply-item">
                            <span class="reply-user" @click="goToUser(reply.userId)">{{ reply.userName }}</span>
                            <span v-if="reply.replyToUserId" class="reply-to">
                                回复 <span class="reply-to-user" @click="goToUser(reply.replyToUserId)">{{
                                    reply.replyToUserName }}</span>：
                            </span>
                            <span class="reply-content">{{ reply.content }}</span>
                        </div>

                        <div class="view-more" v-if="comment.replyCount > comment.replies.length"
                            @click="loadMoreReplies(index)">
                            查看更多回复
                        </div>
                    </div>

                    <div class="reply-action" @click="replyComment(index)">回复</div>
                </div>
            </div>

            <!-- 空评论状态 -->
            <div class="empty-comment" v-else>
                <van-empty description="暂无评论，快来抢沙发吧~" />
            </div>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="detail-bottom">
        <div class="comment-input-wrapper">
            <div class="comment-input" @click="showCommentPopup = true">
                <van-icon name="comment-o" />
                <span>说点什么...</span>
            </div>
        </div>
        <div class="action-icons">
            <div class="action-item" @click="toggleLike">
                <van-icon :name="isLiked ? 'like' : 'like-o'" :class="{ 'active': isLiked }" />
                <span>{{ note.likeCount }}</span>
            </div>
            <div class="action-item" @click="toggleFavorite">
                <van-icon :name="isFavorited ? 'star' : 'star-o'" :class="{ 'active': isFavorited }" />
                <span>{{ note.favoriteCount }}</span>
            </div>
        </div>
    </div>

    <!-- 评论弹出层 -->
    <van-popup v-model="showCommentPopup" position="bottom" round :style="{ height: '40%' }">
        <div class="comment-popup">
            <div class="popup-header">
                <span>{{ replyTo ? `回复：${replyTo}` : '添加评论' }}</span>
                <van-icon name="cross" @click="cancelComment" />
            </div>
            <div class="popup-content">
                <van-field v-model="commentText" type="textarea" placeholder="友善评论，文明发言" rows="3" autosize
                    maxlength="200" show-word-limit />
            </div>
            <div class="popup-footer">
                <van-button type="primary" size="small" round :disabled="!commentText.trim()" @click="submitComment">
                    发送
                </van-button>
            </div>
        </div>
    </van-popup>

    <!-- 操作菜单 -->
    <van-action-sheet v-model="showActionSheet" :actions="actionSheetActions" cancel-text="取消"
        @select="onActionSheetSelect" />
</div>
</template>

<script>
export default {
    name: 'DetailPage',

    data() {
        return {
            noteId: this.$route.params.id,
            currentSwipe: 0,
            isLiked: false,
            isFavorited: false,
            isFollowed: false,
            showCommentPopup: false,
            showActionSheet: false,
            commentText: '',
            replyTo: '',
            replyCommentIndex: -1,
            commentSortType: 'hot', // 'hot' or 'time'

            // 模拟数据
            note: {
                id: '1',
                title: '探店 | 这家藏在胡同里的咖啡馆也太安静了吧',
                content: '周末和朋友一起去了这家位于北京胡同里的咖啡馆，环境超级安静，适合工作和阅读。店内的装修风格是极简工业风，墙上挂着很多复古的黑胶唱片。点了一杯手冲耶加雪菲，酸甜平衡，回甘明显。如果你也喜欢安静的环境，推荐来打卡！',
                images: [
                    'https://img01.yzcdn.cn/vant/cat.jpeg',
                    'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://picsum.photos/300/400?random=1',
                    'https://picsum.photos/300/400?random=2',
                    'https://picsum.photos/300/400?random=3',
                    'https://picsum.photos/300/400?random=4',
                    'https://picsum.photos/300/400?random=5'
                ],
                topics: ['咖啡馆打卡', '北京探店', '胡同文化'],
                location: '北京市东城区南锣鼓巷',
                createTime: '2023-05-20 14:30',
                likeCount: 256,
                favoriteCount: 78,
                commentCount: 32,
                userId: '101',
                userName: '咖啡日记',
                userDesc: '分享城市里的咖啡馆和生活方式',
                userAvatar: 'https://img01.yzcdn.cn/vant/cat.jpeg'
            },

            // 模拟评论数据
            comments: [
                {
                    id: '1',
                    content: '看起来好棒！请问价格怎么样呢？',
                    createTime: '2023-05-20 15:20',
                    likeCount: 45,
                    isLiked: false,
                    userId: '102',
                    userName: '城市漫步者',
                    userAvatar: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    replyCount: 2,
                    replies: [
                        {
                            id: '11',
                            content: '我去过，价格中等偏上，一杯手冲大概50-60左右',
                            userId: '103',
                            userName: '咖啡控',
                            createTime: '2023-05-20 16:05'
                        },
                        {
                            id: '12',
                            content: '谢谢告知！',
                            userId: '102',
                            userName: '城市漫步者',
                            replyToUserId: '103',
                            replyToUserName: '咖啡控',
                            createTime: '2023-05-20 16:30'
                        }
                    ]
                },
                {
                    id: '2',
                    content: '环境看起来真的很不错，下周末一定要去打卡！',
                    createTime: '2023-05-20 17:45',
                    likeCount: 23,
                    isLiked: false,
                    userId: '104',
                    userName: '周末探店',
                    userAvatar: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    replyCount: 0,
                    replies: []
                }
            ],

            // 操作菜单选项
            actionSheetActions: [
                { name: '收藏', color: '#ee0a24' },
                { name: '不感兴趣' },
                { name: '举报' }
            ]
        }
    },

    created() {
        this.fetchNoteDetail()
    },

    methods: {
        // 获取笔记详情
        fetchNoteDetail() {
            // 模拟API请求
            setTimeout(() => {
                // 动态更新图片数据
                const moreImages = [
                    'https://img01.yzcdn.cn/vant/cat.jpeg',
                    'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://picsum.photos/300/400?random=1',
                    'https://picsum.photos/300/400?random=2',
                    'https://picsum.photos/300/400?random=3',
                    'https://picsum.photos/300/400?random=4',
                    'https://picsum.photos/300/400?random=5'
                ]

                // 更新note对象
                this.note = {
                    ...this.note,
                    images: moreImages
                }

                console.log('笔记详情加载完成，共加载 ' + this.note.images.length + ' 张图片')
            }, 500)
        },

        // 轮播图变化
        onSwipeChange(index) {
            this.currentSwipe = index
        },

        // 点赞操作
        toggleLike() {
            this.isLiked = !this.isLiked
            this.note.likeCount += this.isLiked ? 1 : -1

            // 模拟API请求
            this.$toast(this.isLiked ? '点赞成功' : '已取消点赞')
        },

        // 收藏操作
        toggleFavorite() {
            this.isFavorited = !this.isFavorited
            this.note.favoriteCount += this.isFavorited ? 1 : -1

            // 模拟API请求
            this.$toast(this.isFavorited ? '收藏成功' : '已取消收藏')
        },

        // 关注操作
        toggleFollow() {
            this.isFollowed = !this.isFollowed

            // 模拟API请求
            this.$toast(this.isFollowed ? '关注成功' : '已取消关注')
        },

        // 分享操作
        onShare() {
            this.$toast('分享功能开发中')
        },

        // 操作菜单选择
        onActionSheetSelect(action) {
            switch (action.name) {
                case '收藏':
                    this.toggleFavorite()
                    break
                case '不感兴趣':
                    this.$toast('已减少此类内容推荐')
                    break
                case '举报':
                    this.$toast('举报功能开发中')
                    break
            }
        },

        // 评论排序切换
        toggleCommentSort() {
            this.commentSortType = this.commentSortType === 'hot' ? 'time' : 'hot'

            // 模拟排序
            if (this.commentSortType === 'hot') {
                this.comments.sort((a, b) => b.likeCount - a.likeCount)
            } else {
                this.comments.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
            }
        },

        // 点赞评论
        likeComment(index) {
            const comment = this.comments[index]
            comment.isLiked = !comment.isLiked
            comment.likeCount += comment.isLiked ? 1 : -1
        },

        // 加载更多回复
        loadMoreReplies() {
            this.$toast('加载更多回复功能开发中')
        },

        // 回复评论
        replyComment(index) {
            const comment = this.comments[index]
            this.replyTo = comment.userName
            this.replyCommentIndex = index
            this.showCommentPopup = true
        },

        // 取消评论
        cancelComment() {
            this.commentText = ''
            this.replyTo = ''
            this.replyCommentIndex = -1
            this.showCommentPopup = false
        },

        // 提交评论
        submitComment() {
            if (!this.commentText.trim()) return

            // 模拟API请求
            this.$toast.loading({
                message: '发送中...',
                forbidClick: true,
            })

            setTimeout(() => {
                if (this.replyCommentIndex >= 0) {
                    // 回复评论
                    const comment = this.comments[this.replyCommentIndex]
                    comment.replies.push({
                        id: Date.now().toString(),
                        content: this.commentText,
                        userId: '999', // 当前用户ID
                        userName: '我', // 当前用户名
                        replyToUserId: comment.userId,
                        replyToUserName: comment.userName,
                        createTime: new Date().toLocaleString()
                    })
                    comment.replyCount++
                } else {
                    // 新评论
                    this.comments.unshift({
                        id: Date.now().toString(),
                        content: this.commentText,
                        createTime: new Date().toLocaleString(),
                        likeCount: 0,
                        isLiked: false,
                        userId: '999', // 当前用户ID
                        userName: '我', // 当前用户名
                        userAvatar: 'https://img01.yzcdn.cn/vant/cat.jpeg', // 当前用户头像
                        replyCount: 0,
                        replies: []
                    })
                }

                this.$toast.success('评论成功')
                this.cancelComment()
            }, 1000)
        },

        // 跳转到话题页
        goToTopic(topic) {
            this.$toast(`跳转到话题: ${topic}`)
        },

        // 跳转到位置页
        goToLocation(location) {
            this.$toast(`跳转到位置: ${location}`)
        },

        // 跳转到用户页
        goToUser(userId) {
            this.$router.push(`/user/${userId}`)
        }
    }
}
</script>

<style scoped>
.detail-container {
    min-height: 100vh;
    background-color: var(--color-white);
    padding-bottom: 50px;
}

.detail-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent;
}

.detail-nav :deep(.van-nav-bar__left),
.detail-nav :deep(.van-nav-bar__right) {
    color: var(--color-white);
}

.more-icon {
    margin-left: 16px;
}

.detail-content {
    padding-bottom: 60px;
}

.detail-swiper {
    position: relative;
    height: 70vh;
}

.swipe-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swipe-indicator {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-white);
    border-radius: 12px;
    font-size: var(--font-size-small);
}

.detail-info {
    padding: 16px;
}

.detail-title {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: 12px;
}

.detail-desc {
    font-size: var(--font-size-normal);
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.detail-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: 16px;
}

.detail-topic {
    color: var(--color-primary);
    font-size: var(--font-size-small);
}

.detail-location {
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

.detail-location .van-icon {
    margin-right: 4px;
}

.detail-time {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

.user-info {
    display: flex;
    align-items: center;
    padding: 16px;
    border-top: 8px solid var(--color-background);
    border-bottom: 8px solid var(--color-background);
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-detail {
    flex: 1;
}

.user-name {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    margin-bottom: 4px;
}

.user-desc {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.follow-btn {
    padding: 6px 16px;
    border-radius: 16px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-small);
}

.follow-btn.followed {
    background-color: var(--color-background);
    color: var(--color-text-secondary);
}

.comment-section {
    padding: 16px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h3 {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
}

.sort-btn {
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

.sort-btn .van-icon {
    margin-left: 4px;
}

.comment-list {
    margin-bottom: 16px;
}

.comment-item {
    margin-bottom: 20px;
}

.comment-user {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 8px;
}

.comment-user-info {
    flex: 1;
}

.comment-user-name {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    margin-bottom: 2px;
}

.comment-time {
    font-size: var(--font-size-mini);
    color: var(--color-text-secondary);
}

.comment-like {
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
}

.comment-like .van-icon {
    margin-right: 4px;
}

.comment-content {
    font-size: var(--font-size-normal);
    line-height: 1.5;
    margin-bottom: 8px;
    padding-left: 44px;
}

.reply-list {
    background-color: var(--color-background);
    border-radius: var(--border-radius-small);
    padding: 8px 12px;
    margin-left: 44px;
    margin-bottom: 8px;
}

.reply-item {
    font-size: var(--font-size-small);
    margin-bottom: 8px;
}

.reply-user {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.reply-to {
    color: var(--color-text-primary);
}

.reply-to-user {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.reply-content {
    color: var(--color-text-primary);
}

.view-more {
    font-size: var(--font-size-small);
    color: var(--color-primary);
    text-align: center;
    padding: 4px 0;
}

.reply-action {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    padding-left: 44px;
}

.detail-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    z-index: 10;
}

.comment-input-wrapper {
    flex: 1;
    margin-right: 16px;
}

.comment-input {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--color-background);
    border-radius: 20px;
    color: var(--color-text-secondary);
}

.comment-input .van-icon {
    margin-right: 8px;
}

.action-icons {
    display: flex;
    align-items: center;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 16px;
    color: var(--color-text-secondary);
}

.action-item .van-icon {
    font-size: 24px;
    margin-bottom: 2px;
}

.action-item .van-icon.active {
    color: var(--color-primary);
}

.comment-popup {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
}

.popup-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.popup-footer {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
}
</style>